<style lang="less">
@import "@/assets/style/variables.less";

.article-list {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;
    position: relative;

    .article-list-wrap {
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .my-input {
        width: 100% !important;
        height: 28px;
        line-height: 28px;
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        border-radius: 4px;
    }

    .article-list-footer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }
}
</style>
<template>
    <div class="article-list">
        <h3 class="article-list-title">用户列表</h3>
        <div class="article-list-wrap">
            <el-table border :data="tableData" style="width: 100%">
                <el-table-column align="center" label="序号" width="80">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="ID" prop="id" width="80"></el-table-column>
                <el-table-column align="center" label="账号" prop="account" width="100"></el-table-column>
                <el-table-column align="center" label="用户名" prop="username" width="80"></el-table-column>
                <el-table-column align="center" label="性别" width="80" prop="gender"></el-table-column>
                <el-table-column align="center" label="注册时间" prop="createAt" width="180px"></el-table-column>
                <el-table-column align="center" label="个性标签" prop="tag"></el-table-column>


                <el-table-column align="right" width="180">
                    <template slot="header">
                        <input type="text" placeholder="关键字" class="my-input" v-model="search">
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="article-list-footer">
            <el-pagination @size-change="handleSizeChange" @current-change="currentChangeFn" :current-page="page_num"
                :page-sizes="[5, 10, 15, 20]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { itemsUser, deleteUser, searchUser } from "../api/index"
import { Message, MessageBox } from 'element-ui'
export default {

    data() {
        return {
            tableData: [
            ],
            search: '',
            page_num: 1,// 第几页
            page_size: 5,//多少
            total: 0,
            timer: null
        }
    },
    // 组件销毁前清理定时器
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    },
    methods: {

        // 搜索用户
        async searchUserFn(keyword) {
            await searchUser({ keyword })
                .then(
                    res => {
                        if (res.code == 200) {
                            this.tableData = res.result
                            Message({
                                type: 'success',
                                message: res.msg,
                                showClose: true,
                                offset: 100
                            })
                            this.total = res.result.length
                        } else {
                            Message({
                                type: 'error',
                                message: res.msg,
                                showClose: true,
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            type: 'error',
                            message: "服务器错误",
                            showClose: true,
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },

        async handleSizeChange(val) {
            // console.log(val)
            this.page_size = val
            await this.itemsUserFn()
        },
        async deleteUserFn(id) {
            let token = localStorage.getItem("AUTO_TOKEN");
            if (token) {
                await deleteUser({ id })
                    .then(
                        resData => {
                            // 删除成功
                            // console.log(resData)
                            if (resData.code == 200) {
                                Message({
                                    type: "success",
                                    message: resData.msg,
                                    offset: 100,
                                    showClose: true
                                })
                                this.itemsUserFn();
                            }
                            else {
                                Message({ type: "error", message: resData.msg })
                            }
                        }
                    )
            }
            else {
                Message({ type: "error", message: "您还没有登录" })
            }
        },

        // 获取用户列表
        async itemsUserFn() {
            let page_num = this.page_num
            let page_size = this.page_size
            await itemsUser({ page_num, page_size })
                .then(
                    resData => {
                        // console.log(resData)
                        if (resData.code == 200) {
                            this.tableData = resData.data.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                item.gender = item.gender ? item.gender : '未知'
                                return item
                            })
                            console.log(this.tableData)
                            this.total = resData.total;
                        }
                    }
                )
        },
        // 删除
        handleDelete(row) {
            // console.log(row);
            MessageBox.confirm("您确定要删除该用户吗?", {
                confirmButtonText: "确定",
                cancelButtonClass: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteUserFn(row.id)
            }).catch(() => {
                Message({
                    offset: 100,
                    showClose: true,
                    type: 'info',
                    message: '已取消删除'
                });
            })

        },

        // 当前页
        currentChangeFn(val) {
            // console.log("index:", val);
            this.page_num = val;
            this.itemsUserFn();
        }

    },
    created() {
        // 初始化
        this.itemsUserFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        },
        search: function (val) {
            if (val.trim() == '') {
                this.itemsUserFn()
                return
            }
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.searchUserFn(val)
            }, 600)
        }
    }
}
</script>